<template>
	<el-aside width="200px" style="background-color: #2f4050; color: #ffffff">
		<el-row class="tac">
			<el-col :span="24" style="width: 200px">
				<el-menu default-active="2" @open="handleOpen" @close="handleClose">
					<menu-list :menudata="menudata" />
				</el-menu>
			</el-col>
		</el-row>
	</el-aside>
</template>
<script lang="ts">
import { WebApi } from '@/assets/model/httpconfig/WebApi';
import { Vue, Options } from 'vue-class-component';
import Menu from '@/components/menu/Menu.vue';
import { MenuHelper } from '@/assets/model/baseclass/WebHelper';
import { system } from '@/api';

@Options({
	components: {
		'menu-list': Menu
	}
})
export default class Aside extends Vue {
	public menu = new system.menu();
	public menudata: any = null;
	public beforeMount() {
		this.selectMenuList();
	}
	public selectMenuList() {
		let _this = this;
		let menuhelp = new MenuHelper();
		let menuList: Array<any> = [];
		this.menu
			.selectmenus()
			.then(function (response) {
				let menus = menuhelp.getMenuLists(response.data.data, '0');
				menuList.push(...menus);
				_this.menudata = menuList;
				console.log(menuList);
			})
			.catch(function (error) {
				console.log(error);
			});
	}
	public handleOpen(key: any, keyPath: any) {
		//console.log(key, keyPath)
	}
	public handleClose(key: any, keyPath: any) {
		//console.log(key, keyPath)
	}
}
</script>
<style lang="scss"></style>
